<template>
  <!-- 网络广播 -->
  <div class="Webcasts">
    <div class="title">
      <Title> 实时监控 </Title>
      <span @click="SeeMore(true)" class="TItle_right">查看更多></span>
    </div>

    <div id="Video" class="body"></div>
  </div>
</template>

<script>
import Title from "./Title.vue";
import { GetBigScreenUrl } from "@/api/BigScreen.js";

export default {
  components: {
    Title,
  },
  data() {
    return {
      player: null,
      preUrl: "",
    };
  },
  created() {},
  mounted() {
    let that = this;
    GetBigScreenUrl().then((res) => {
      this.$store.commit("BigScreen/SET_Big_Screen_Info", res.data);
      console.log(this.$store.state.BigScreen.BigScreenInfo);
      that.preUrl = res.data.data[0].path;
      that.initPlayer();
    });
  },
  methods: {
    //   初始化播放器
    initPlayer() {
      this.player = new window.JSPlugin({
        // 需要英文字母开头 必填
        szId: "Video",
        // 必填,引用H5player.min.js的js相对路径
        szBasePath: "/h5player/",
        iMaxSplit: 1,
        iCurrentSplit: 1,
      });
      this.initPlugin();
    },
    initPlugin() {
      this.player.JS_SetWindowControlCallback({
        windowEventSelect(iWindIndex) {
          // 插件选中窗口回调
          console.log("windowSelect callback: ", iWindIndex);
        },
        pluginErrorHandler(iWindIndex, iErrorCode, oError) {
          // 插件错误回调
          console.error(
            `window-${iWindIndex}, errorCode: ${iErrorCode}`,
            oError
          );
        },
        windowEventOver(iWindIndex) {
          // 鼠标移过回调
          console.log("鼠标移过回调", iWindIndex);
        },
        windowEventOut(iWindIndex) {
          // 鼠标移出回调
          console.log("鼠标移出回调", iWindIndex);
        },
        windowFullCcreenChange(bFull) {
          // 全屏切换回调
          console.log("全屏切换回调", bFull);
        },
        firstFrameDisplay(iWndIndex, iWidth, iHeight) {
          // 首帧显示回调
          console.log("首帧显示回调", iWndIndex, iWidth, iHeight);
        },
        performanceLack(iWndIndex) {
          // 性能不足回调
          console.log("性能不足回调", iWndIndex);
        },
      });
      this.play();
    },
    play() {
      let preUrl = this.preUrl; // 播放地址
      const param = {
        playURL: this.preUrl,
        // 1：高级模式  0：普通模式，高级模式支持所有
        mode: 0,
      };
      // 当前播放窗口下标
      let index = 0;
      this.player.JS_Play(preUrl, param, index).then(
        () => {
          // 播放成功回调
          console.log("播放成功");
        },
        (err) => {
          console.log("播放失败");
          console.info("JS_Play failed:", err);
        }
      );
    },
    //
    SeeMore(type) {
      this.$bus.$emit("SeeMore", type);
    },
  },
};
</script>

<style lang="scss" scoped>
.TItle_right {
  position: absolute;
  cursor: pointer;
  font-weight: 500;
  color: rgba(0, 255, 251, 1);
  font-size: 0.175rem /* 14/80 */;
  top: 0.2875rem;
  right: 0.25rem;
}
.Webcasts {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .title {
    width: 100%;
    flex: 1;
  }
  .body {
    overflow: hidden;
    width: 100%;
    flex: 6;
    padding-top: 0.154125rem /* 12.33/80 */;
    .info {
      overflow: hidden;
      width: 4.85rem /* 388/80 */;
      height: 0.2875rem /* 23/80 */;
      margin-left: 0.25rem /* 20/80 */;
      margin-bottom: 0.20675rem /* 16.54/80 */;
    }
  }
  .logo {
    display: inline-block;
    width: 0.222875rem /* 17.83/80 */;
    height: 0.222875rem /* 17.83/80 */;
    background: url(../../../assets/Home/gonggao.png);
  }
  .text {
    display: inline-block;
    height: 100%;
    width: 4.075rem /* 326/80 */;
    margin-left: 0.135rem /* 10.8/80 */;
    overflow: hidden;
    color: white;
    font-size: 0.196625rem /* 15.73/80 */;
    line-height: 0.26975rem /* 21.58/80 */;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
  }
}
</style>
